<template>
  <FullscreenDataScreen :fullscreen="fullscreen">
    <div class="data-screen-container" ref="screenRef">
      <div class="screen-header">
        <div class="header-left">
          <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
          </div>
          <div class="title">
            电信客户流失预警系统 - 实时监控大屏
            <!-- 在标题右侧放置返回按钮占位元素，仅在全屏模式下显示 -->
            <div v-if="fullscreen" class="back-button-placeholder"></div>
          </div>
        </div>
        <div class="header-center">
          <div class="time">{{ currentTime }}</div>
        </div>
        <div class="header-right">
          <div class="weather">
            <el-icon><Sunny /></el-icon>
            <span>上海 25°C 晴</span>
          </div>
          <div class="user">
            <el-avatar
              :size="30"
              :src="userStore.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            ></el-avatar>
            <span>{{ userStore.fullName || userStore.username || '系统管理员' }}</span>
          </div>
          <!-- 添加全屏切换按钮 -->
          <el-button v-if="!fullscreen" type="primary" size="small" @click="enterFullscreen" class="fullscreen-btn">
            <el-icon><FullScreen /></el-icon> 全屏
          </el-button>
        </div>
      </div>

      <!-- 数据看板，添加在内容区域上方 -->
      <div class="data-dashboard">
        <div class="dashboard-item">
          <div class="dashboard-value">{{ formatNumber(customerData.total) }}</div>
          <div class="dashboard-label">客户总数</div>
          <div class="dashboard-trend up">
            <el-icon><Top /></el-icon>
            <span>{{ customerData.growth }}%</span>
          </div>
        </div>
        <div class="dashboard-item danger">
          <div class="dashboard-value">{{ formatNumber(customerData.highRisk) }}</div>
          <div class="dashboard-label">高风险客户</div>
          <div class="dashboard-trend up">
            <el-icon><Top /></el-icon>
            <span>{{ customerData.highRiskGrowth }}%</span>
          </div>
        </div>
        <div class="dashboard-item warning">
          <div class="dashboard-value">{{ formatNumber(customerData.mediumRisk) }}</div>
          <div class="dashboard-label">中风险客户</div>
          <div class="dashboard-trend down">
            <el-icon><Bottom /></el-icon>
            <span>{{ customerData.mediumRiskGrowth }}%</span>
          </div>
        </div>
        <div class="dashboard-item success">
          <div class="dashboard-value">{{ formatNumber(customerData.lowRisk) }}</div>
          <div class="dashboard-label">低风险客户</div>
          <div class="dashboard-trend down">
            <el-icon><Bottom /></el-icon>
            <span>1.2%</span>
          </div>
        </div>
        <div class="dashboard-item primary">
          <div class="dashboard-value">{{ formatNumber(dailyStats.retainCount) }}</div>
          <div class="dashboard-label">今日挽留客户</div>
          <div class="dashboard-trend up">
            <el-icon><Top /></el-icon>
            <span>12.5%</span>
          </div>
        </div>
      </div>

      <div class="screen-content">
        <div class="left-panel">
          <div class="panel-item customer-overview">
            <div class="panel-header">
              <div class="panel-title">客户风险分布</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="customerPieChart"></div>
            </div>
          </div>

          <div class="panel-item risk-distribution">
            <div class="panel-header">
              <div class="panel-title">风险分布趋势</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="riskTrendChart"></div>
            </div>
          </div>
          
          <!-- 新增：客户增长趋势 -->
          <div class="panel-item customer-growth">
            <div class="panel-header">
              <div class="panel-title">客户增长趋势</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="customerGrowthChart"></div>
            </div>
          </div>
        </div>

        <div class="center-panel">
          <div class="panel-item geo-distribution">
            <div class="panel-header">
              <div class="panel-title">地域分布热力图</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="regionMapRef"></div>
            </div>
          </div>
          
          <!-- 新增：客户生命周期阶段 -->
          <div class="panel-item lifecycle-stages">
            <div class="panel-header">
              <div class="panel-title">客户生命周期阶段</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="lifecycleChart"></div>
            </div>
          </div>
        </div>

        <div class="right-panel">
          <div class="panel-item feature-importance">
            <div class="panel-header">
              <div class="panel-title">流失特征TOP10</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="featureChart"></div>
            </div>
          </div>

          <div class="panel-item realtime-alerts">
            <div class="panel-header">
              <div class="panel-title">实时预警</div>
            </div>
            <div class="panel-content">
              <div class="alert-list">
                <transition-group name="alert">
                  <div v-for="(alert, index) in realtimeAlerts" :key="alert.time + index" class="alert-item">
                    <div class="alert-time">{{ alert.time }}</div>
                    <div class="alert-content" :class="{'high-risk': alert.level === 'high', 'medium-risk': alert.level === 'medium'}">
                      <el-icon v-if="alert.level === 'high'"><Warning /></el-icon>
                      <el-icon v-else><InfoFilled /></el-icon>
                      <span>{{ alert.content }}</span>
                    </div>
                  </div>
                </transition-group>
              </div>
            </div>
          </div>
          
          <!-- 新增：营销活动效果 -->
          <div class="panel-item marketing-performance">
            <div class="panel-header">
              <div class="panel-title">营销活动效果</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="marketingChart"></div>
            </div>
          </div>
        </div>
        
        <!-- 新增：底部图表区域 -->
        <div class="bottom-panel">
          <!-- 客户行为分析 -->
          <div class="panel-item customer-behavior">
            <div class="panel-header">
              <div class="panel-title">客户行为分析</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="behaviorChart"></div>
            </div>
          </div>
          
          <!-- ARPU值变化趋势 -->
          <div class="panel-item arpu-trend">
            <div class="panel-header">
              <div class="panel-title">ARPU值变化趋势</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="arpuChart"></div>
            </div>
          </div>
          
          <!-- 套餐使用情况 -->
          <div class="panel-item package-usage">
            <div class="panel-header">
              <div class="panel-title">套餐使用情况</div>
            </div>
            <div class="panel-content">
              <div class="chart-container" ref="packageChart"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="screen-footer">
        <div class="marquee">
          <span>系统今日共预测客户 {{ formatNumber(dailyStats.predictCount) }} 位，识别高风险客户 {{ formatNumber(dailyStats.highRiskCount) }} 位，成功挽留 {{ formatNumber(dailyStats.retainCount) }} 位。客户服务满意度达到98.2%，较上月提升2.5个百分点。本月新增客户2,354位，平台稳定运行15天，系统响应时间平均低于0.5秒。</span>
        </div>
      </div>
    </div>
  </FullscreenDataScreen>
</template>

<script setup name="DataScreenOverview">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { debounce } from 'lodash-es'
import FullscreenDataScreen from '@/components/layout/FullscreenDataScreen.vue'
import { useDatascreenStore } from '@/store/modules/datascreen'
import { useUserStore } from '@/store/modules/user'
import { FullScreen, Sunny, Top, Bottom, Warning, InfoFilled } from '@element-plus/icons-vue'

// 使用Store
const datascreenStore = useDatascreenStore()
const userStore = useUserStore()

// 计算属性从Store获取数据
const overviewData = computed(() => datascreenStore.overviewData)
const realtimeAlerts = computed(() => datascreenStore.realtimeAlerts)
const currentUser = computed(() => userStore.userInfo)

// 每日统计数据
const dailyStats = computed(() => {
  const data = overviewData.value
  if (!data || !data.dailyStats) {
    return {
      predictCount: 12500,
      highRiskCount: 850,
      retainCount: 320
    }
  }

  return {
    predictCount: data.dailyStats.predictCount || 12500,
    highRiskCount: data.dailyStats.highRiskCount || 850,
    retainCount: data.dailyStats.retainCount || 320
  }
})

// 接收全屏模式参数
const props = defineProps({
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const currentTime = ref(formatDateTime(new Date()))

// 定义定时器变量
let timer = null
let alertsTimer = null

// 进入全屏模式
const enterFullscreen = () => {
  router.push('/fullscreen/datascreen/overview')
}

// 响应式引用
const screenRef = ref(null)
const customerPieChart = ref(null)
const riskTrendChart = ref(null)
const regionMapRef = ref(null)
const featureChart = ref(null)
// 新增图表引用
const customerGrowthChart = ref(null)
const lifecycleChart = ref(null)
const marketingChart = ref(null)
const behaviorChart = ref(null)
const arpuChart = ref(null)
const packageChart = ref(null)

// 图表实例
let charts = {
  customerPie: null,
  riskTrend: null,
  regionMap: null,
  feature: null,
  // 新增图表实例
  customerGrowth: null,
  lifecycle: null,
  marketing: null,
  behavior: null,
  arpu: null,
  package: null
}

// 格式化数字
const formatNumber = (num) => {
  if (!num) return '0'
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

// 模拟客户数据
const customerData = computed(() => {
  const data = overviewData.value
  if (!data) {
    return {
      total: 125000,
      growth: 3.2,
      highRisk: 8500,
      highRiskGrowth: 5.6,
      mediumRisk: 15600,
      mediumRiskGrowth: 2.1,
      lowRisk: 100900,
      lowRiskGrowth: -1.2
    }
  }
  
  return {
    total: data.totalCustomers || 125000,
    growth: data.customerGrowth || 3.2,
    highRisk: data.highRiskCount || 8500,
    highRiskGrowth: data.highRiskGrowth || 5.6,
    mediumRisk: data.mediumRiskCount || 15600,
    mediumRiskGrowth: data.mediumRiskGrowth || 2.1,
    lowRisk: data.lowRiskCount || 100900,
    lowRiskGrowth: data.lowRiskGrowth || -1.2
  }
})

// 启动预警自动轮播
const startAlertAutoplay = () => {
  alertsTimer = setInterval(() => {
    // 自动刷新预警数据
    datascreenStore.fetchRealtimeAlerts()
  }, 30000) // 30秒刷新一次
}

// 格式化日期时间
function formatDateTime(date) {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 格式化更新时间 (暂时保留，可能在未来版本中使用)
// const formatUpdateTime = (timeStr) => {
//   if (!timeStr) return '未知'
//   const date = new Date(timeStr)
//   return date.toLocaleString('zh-CN')
// }

// 加载所有数据
const loadAllData = async () => {
  console.log('开始加载数据大屏数据...')
  
  try {
    await Promise.all([
      datascreenStore.fetchOverviewData(),
      datascreenStore.fetchCustomerRiskData(),
      datascreenStore.fetchRealtimeAlerts()
    ])
    
    console.log('数据加载完成')
    console.log('概览数据:', overviewData.value)
    console.log('用户信息:', currentUser.value)
    console.log('用户Store状态:', userStore.userInfo)
    console.log('用户头像URL:', userStore.avatar)
    console.log('原始头像数据:', userStore.userInfo?.avatar)
    
  } catch (error) {
    console.error('数据加载失败:', error)
    ElMessage.warning('部分数据加载失败，使用模拟数据')
  }
}

// 组件挂载
onMounted(async () => {
  console.log('DataScreenOverview 组件挂载')
  
  // 启动时间更新
  const timeTimer = setInterval(() => {
    currentTime.value = formatDateTime(new Date())
  }, 1000)
  
  // 初始加载数据
  await loadAllData()
  
  // 启动数据自动刷新
  const dataTimer = setInterval(async () => {
    console.log('自动刷新数据...')
    await datascreenStore.fetchRealtimeAlerts()
  }, 30000) // 30秒刷新一次
  
  // 启动概览数据刷新
  const overviewTimer = setInterval(async () => {
    console.log('自动刷新概览数据...')
    await datascreenStore.fetchOverviewData()
  }, 60000) // 1分钟刷新一次概览数据
  
  // 清理定时器
  onUnmounted(() => {
    console.log('清理定时器')
    clearInterval(timeTimer)
    clearInterval(dataTimer)
    clearInterval(overviewTimer)
  })
})

// 初始化客户分布饼图
const initCustomerPieChart = () => {
  if (!customerPieChart.value) return null
  
  const chart = echarts.init(customerPieChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '客户风险分布',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#041730',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: customerData.value.highRisk,
            name: '高风险',
            itemStyle: { color: '#f56c6c' }
          },
          {
            value: customerData.value.mediumRisk,
            name: '中风险',
            itemStyle: { color: '#e6a23c' }
          },
          {
            value: customerData.value.lowRisk,
            name: '低风险',
            itemStyle: { color: '#67c23a' }
          }
        ]
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化风险趋势图
const initRiskTrendChart = () => {
  if (!riskTrendChart.value) return null
  
  const chart = echarts.init(riskTrendChart.value)
  
  // 生成过去30天的日期
  const dates = []
  const now = new Date()
  for (let i = 29; i >= 0; i--) {
    const d = new Date(now)
    d.setDate(d.getDate() - i)
    dates.push(`${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`)
  }
  
  // 生成模拟数据
  const generateData = (baseValue, variance) => {
    return dates.map(() => {
      return +(baseValue + Math.random() * variance - variance / 2).toFixed(1)
    })
  }
  
  const highRiskData = generateData(8, 4)
  const mediumRiskData = generateData(18, 6)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        textStyle: {
          color: '#fff'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '12%',
      containLabel: true
    },
    legend: {
      data: ['高风险', '中风险'],
      right: '10%',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        interval: 4
      }
    },
    yAxis: {
      type: 'value',
      name: '百分比(%)',
      nameTextStyle: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '高风险',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(245, 108, 108, 0.5)',
          shadowBlur: 10
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#f56c6c'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(245, 108, 108, 0.5)'
            },
            {
              offset: 1,
              color: 'rgba(245, 108, 108, 0.1)'
            }
          ])
        },
        data: highRiskData
      },
      {
        name: '中风险',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(230, 162, 60, 0.5)',
          shadowBlur: 10
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#e6a23c'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(230, 162, 60, 0.5)'
            },
            {
              offset: 1,
              color: 'rgba(230, 162, 60, 0.1)'
            }
          ])
        },
        data: mediumRiskData
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化地域分布图表
const initRegionMap = () => {
  if (!regionMapRef.value) return null
  
  const chart = echarts.init(regionMapRef.value)
  
  // 替换地图为气泡图
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['东北', '华北', '华东', '华南', '华中', '西北', '西南'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '流失用户数',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#a7c9fe'
      },
      nameTextStyle: {
        color: '#a7c9fe'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [
      {
        type: 'scatter',
        data: [
          { name: '东北', value: 853, symbolSize: 35 },
          { name: '华北', value: 1245, symbolSize: 55 },
          { name: '华东', value: 1832, symbolSize: 70 },
          { name: '华南', value: 1422, symbolSize: 60 },
          { name: '华中', value: 986, symbolSize: 45 },
          { name: '西北', value: 642, symbolSize: 30 },
          { name: '西南', value: 897, symbolSize: 40 }
        ],
        itemStyle: {
          color: function(params) {
            // 自定义颜色
            const colorList = [
              '#5470c6', '#91cc75', '#fac858', '#ee6666', 
              '#73c0de', '#3ba272', '#fc8452'
            ]
            return new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
              { offset: 0, color: echarts.color.lift(colorList[params.dataIndex], 0.2) },
              { offset: 1, color: colorList[params.dataIndex] }
            ])
          },
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        },
        label: {
          show: true,
          formatter: '{b}',
          position: 'inside',
          color: '#fff',
          fontWeight: 'bold'
        },
        emphasis: {
          scale: true,
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化特征重要性图表
const initFeatureChart = () => {
  if (!featureChart.value) return null
  
  const chart = echarts.init(featureChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['合同类型', '月费用', '使用期限', '互联网服务', '客户服务', '支付方式', '年龄', '套餐内容', '是否有伴侣', '性别'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '特征重要性',
        type: 'bar',
        data: [0.25, 0.18, 0.15, 0.12, 0.09, 0.08, 0.05, 0.04, 0.03, 0.01],
        itemStyle: {
          color: function(params) {
            const colorList = ['#f56c6c', '#fc8b40', '#fdc528', '#36cbcb', '#4cabce', '#365b8c', '#2378f7', '#16a6ea', '#4ecdc4', '#7ccd7c'];
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colorList[params.dataIndex]
              },
              {
                offset: 1,
                color: echarts.color.lift(colorList[params.dataIndex], -0.2)
              }
            ]);
          },
          borderRadius: [0, 5, 5, 0],
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10
        },
        label: {
          show: true,
          position: 'right',
          formatter: '{c}',
          color: '#fff'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化客户增长趋势图表
const initCustomerGrowthChart = () => {
  if (!customerGrowthChart.value) return null
  
  const chart = echarts.init(customerGrowthChart.value)
  
  // 生成过去12个月的日期
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增客户', '流失客户', '净增长'],
      textStyle: {
        color: '#fff'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '新增客户',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320, 315, 356, 400, 438, 420],
        itemStyle: {
          color: '#4cabce'
        }
      },
      {
        name: '流失客户',
        type: 'bar',
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
        itemStyle: {
          color: '#e16757'
        }
      },
      {
        name: '净增长',
        type: 'line',
        smooth: true,
        data: [200, 200, 200, 200, 300, 100, 110, 133, 165, 166, 148, 90],
        lineStyle: {
          width: 3,
          color: '#ffde33'
        },
        symbolSize: 8
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化客户生命周期阶段图表
const initLifecycleChart = () => {
  if (!lifecycleChart.value) return null
  
  const chart = echarts.init(lifecycleChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: 10,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '客户生命周期',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#041730',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '获客阶段', itemStyle: { color: '#91cc75' } },
          { value: 735, name: '成长阶段', itemStyle: { color: '#5470c6' } },
          { value: 580, name: '成熟阶段', itemStyle: { color: '#fac858' } },
          { value: 484, name: '流失风险阶段', itemStyle: { color: '#ee6666' } },
          { value: 300, name: '唤回阶段', itemStyle: { color: '#73c0de' } }
        ]
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化营销活动效果图表
const initMarketingChart = () => {
  if (!marketingChart.value) return null
  
  const chart = echarts.init(marketingChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['短信', '电话', '邮件', '社交媒体', '线下活动'],
        axisLabel: {
          color: '#fff',
          rotate: 0
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '转化率(%)',
        min: 0,
        max: 100,
        axisLabel: {
          color: '#fff',
          formatter: '{value}%'
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '触达率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [95, 80, 88, 70, 50],
        itemStyle: {
          color: '#6395f9'
        }
      },
      {
        name: '响应率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [45, 65, 35, 55, 30],
        itemStyle: {
          color: '#62daab'
        }
      },
      {
        name: '转化率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [25, 30, 20, 40, 25],
        itemStyle: {
          color: '#f8c04c'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化客户行为分析图表
const initBehaviorChart = () => {
  if (!behaviorChart.value) return null
  
  const chart = echarts.init(behaviorChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['高风险客户', '低风险客户'],
      textStyle: {
        color: '#fff'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['通话频率', '流量使用', '短信频率', '客服咨询', '投诉频率', '账单支付'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#fff',
        rotate: 30
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '高风险客户',
        type: 'bar',
        barGap: 0,
        data: [4200, 3000, 2000, 3500, 5000, 1800],
        itemStyle: {
          color: '#ee6666'
        }
      },
      {
        name: '低风险客户',
        type: 'bar',
        data: [5000, 4000, 3000, 1800, 1500, 4500],
        itemStyle: {
          color: '#91cc75'
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化ARPU值变化趋势图表
const initArpuChart = () => {
  if (!arpuChart.value) return null
  
  const chart = echarts.init(arpuChart.value)
  
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['高风险客户ARPU', '中风险客户ARPU', '低风险客户ARPU'],
      textStyle: {
        color: '#fff'
      },
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: 'ARPU值(元)',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '高风险客户ARPU',
        type: 'line',
        smooth: true,
        data: [85, 83, 82, 80, 79, 77, 75, 73, 72, 70, 68, 65],
        lineStyle: {
          width: 3,
          color: '#ee6666'
        },
        symbolSize: 8
      },
      {
        name: '中风险客户ARPU',
        type: 'line',
        smooth: true,
        data: [95, 93, 92, 94, 95, 94, 93, 92, 90, 91, 90, 88],
        lineStyle: {
          width: 3,
          color: '#e6a23c'
        },
        symbolSize: 8
      },
      {
        name: '低风险客户ARPU',
        type: 'line',
        smooth: true,
        data: [110, 108, 112, 115, 120, 118, 122, 125, 130, 133, 135, 138],
        lineStyle: {
          width: 3,
          color: '#91cc75'
        },
        symbolSize: 8
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 初始化套餐使用情况图表
const initPackageChart = () => {
  if (!packageChart.value) return null
  
  const chart = echarts.init(packageChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '套餐类型',
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        data: [
          { value: 1048, name: '无限流量套餐', itemStyle: { color: '#3aa1ff' } },
          { value: 735, name: '话费优先套餐', itemStyle: { color: '#4ecb73' } },
          { value: 580, name: '亲情套餐', itemStyle: { color: '#fbd437' } },
          { value: 484, name: '校园套餐', itemStyle: { color: '#975fe4' } },
          { value: 300, name: '商务套餐', itemStyle: { color: '#ff8a00' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  return chart
}

// 更新时间
const updateTime = () => {
  currentTime.value = formatDateTime(new Date())
}

// 屏幕自适应
const handleResize = debounce(() => {
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.resize()
    }
  })
}, 200)

// 创建动画粒子效果
const createParticleEffect = () => {
  if (!screenRef.value) return
  
  const canvas = document.createElement('canvas')
  canvas.className = 'particles-canvas'
  screenRef.value.appendChild(canvas)
  
  // 设置全屏
  const resizeCanvas = () => {
    // 确保screenRef.value存在才访问其属性
    if (screenRef.value) {
      canvas.width = screenRef.value.offsetWidth
      canvas.height = screenRef.value.offsetHeight
    }
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 创建粒子
  const ctx = canvas.getContext('2d')
  const particles = []
  const particleCount = 30 // 减少粒子数量
  
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 2 + 1, // 减小粒子尺寸
      color: `rgba(0, 123, 255, ${Math.random() * 0.3 + 0.1})`, // 降低不透明度
      speedX: Math.random() * 1.5 - 0.75,
      speedY: Math.random() * 1.5 - 0.75
    })
  }
  
  // 连接临近粒子
  const connectParticles = (ctx, particles) => {
    const maxDistance = 120
    
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x
        const dy = particles[i].y - particles[j].y
        const distance = Math.sqrt(dx * dx + dy * dy)
        
        if (distance < maxDistance) {
          ctx.beginPath()
          ctx.strokeStyle = `rgba(0, 123, 255, ${(1 - distance / maxDistance) * 0.3})`
          ctx.lineWidth = 0.5
          ctx.moveTo(particles[i].x, particles[i].y)
          ctx.lineTo(particles[j].x, particles[j].y)
          ctx.stroke()
        }
      }
    }
  }
  
  // 动画循环
  let animationId = null
  const animate = () => {
    if (!ctx || !canvas) return

    animationId = requestAnimationFrame(animate)
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 绘制粒子
    particles.forEach(particle => {
      ctx.beginPath()
      ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2, false)
      ctx.fillStyle = particle.color
      ctx.fill()
      
      // 更新位置
      particle.x += particle.speedX
      particle.y += particle.speedY
      
      // 边界检测
      if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1
      if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1
    })
    
    // 绘制连线
    connectParticles(ctx, particles)
  }
  
  animate()

  // 返回清理函数，用于在组件卸载时调用
  return {
    clean: () => {
      window.removeEventListener('resize', resizeCanvas)
      if (animationId) {
        cancelAnimationFrame(animationId)
      }
      // 移除canvas
      if (screenRef.value && canvas.parentNode === screenRef.value) {
        screenRef.value.removeChild(canvas)
      }
    }
  }
}

// 初始化所有图表
const initAllCharts = () => {
  charts.customerPie = initCustomerPieChart()
  charts.riskTrend = initRiskTrendChart()
  charts.regionMap = initRegionMap()
  charts.feature = initFeatureChart()
  // 初始化新增图表
  charts.customerGrowth = initCustomerGrowthChart()
  charts.lifecycle = initLifecycleChart()
  charts.marketing = initMarketingChart()
  charts.behavior = initBehaviorChart()
  charts.arpu = initArpuChart()
  charts.package = initPackageChart()
}

// 粒子效果清理函数
let particleCleanup = null

onMounted(() => {
  // 在DOM更新后初始化图表，添加延时确保元素完全渲染
  setTimeout(() => {
    initAllCharts()
    
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', handleResize)
  }, 200)
  
  // 添加粒子效果
  particleCleanup = createParticleEffect()
  
  // 设置定时器
  updateTime()
  timer = setInterval(updateTime, 1000)

  // 启动预警自动轮播
  startAlertAutoplay()
})

onUnmounted(() => {
  clearInterval(timer)
  // 清理预警自动轮播定时器
  if (alertsTimer) {
    clearInterval(alertsTimer)
  }
  window.removeEventListener('resize', handleResize)
  
  // 清理粒子效果
  if (particleCleanup && typeof particleCleanup.clean === 'function') {
    particleCleanup.clean()
  }
  
  // 销毁图表实例
  Object.values(charts).forEach(chart => {
    if (chart) {
      chart.dispose()
    }
  })
})
</script>

<style lang="scss" scoped>
// 大屏整体样式
.data-screen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto; // 添加垂直滚动条
  background: linear-gradient(135deg, #041730, #0b1639);
  color: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 30px; // 为固定的footer留出空间
  
  // 滚动条样式美化
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 123, 255, 0.5);
    border-radius: 4px;
    
    &:hover {
      background: rgba(0, 123, 255, 0.7);
    }
  }

  // 粒子效果
  .particles-canvas {
    position: fixed; // 改为固定定位，不跟随滚动
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
}

// 头部样式
.screen-header {
  width: 100%;
  height: 60px;
  background: rgba(11, 27, 61, 0.8);
  border-bottom: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
  z-index: 10;
  position: sticky; // 使头部固定在顶部
  top: 0;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      
      img {
        width: 100%;
        height: 100%;
      }
    }
    
    .title {
      font-size: 22px;
      font-weight: bold;
      background: linear-gradient(to right, #00c6ff, #0072ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
      display: flex; /* 让标题和返回按钮在一行 */
      align-items: center; /* 垂直居中对齐 */
      
      .back-button-placeholder {
        width: 0; /* 不占用实际空间，只用于定位 */
        height: 36px;
        display: inline-block;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          width: 80px; /* 预留返回按钮的位置 */
          height: 100%;
        }
      }
    }
  }
  
  .header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    .time {
      font-size: 18px;
      font-weight: 500;
      color: #00f0ff;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .weather {
      margin-right: 20px;
      font-size: 14px;
      color: #7fdbff;
    }
    
    .user {
      display: flex;
      align-items: center;
      margin-right: 20px;
      
      span {
        margin-left: 10px;
        color: #7fdbff;
      }
    }
    
    .fullscreen-btn {
      margin-left: 0px;
      margin-right: 40px; /* 增加右边距，让按钮向左移动 */
    }
  }
}

// 内容区域
.screen-content {
  flex: 1;
  display: flex;
  padding: 0 10px 50px 10px; // 增加底部内边距，为固定footer留出空间
  gap: 10px;
  z-index: 5;
  flex-wrap: wrap;
  min-height: calc(100vh - 140px - 30px); // 考虑footer的高度
  
  // 通用面板样式
  .panel-item {
    background: rgba(11, 35, 64, 0.7);
    border: 1px solid rgba(0, 164, 255, 0.4);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
    backdrop-filter: blur(5px);
    
    .panel-header {
      height: 36px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background: rgba(0, 110, 255, 0.2);
      border-bottom: 1px solid rgba(0, 164, 255, 0.4);
      
      .panel-title {
        position: relative;
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #7fdbff;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          background: linear-gradient(to bottom, #00f0ff, #0072ff);
        }
      }
    }
    
    .panel-content {
      padding: 15px;
      height: calc(100% - 36px);
      overflow: hidden;
    }
  }

  // 左侧、中间、右侧面板
  .left-panel, .center-panel, .right-panel {
    width: calc(33.33% - 7px); // 三等分，考虑间隙
    display: flex;
    flex-direction: column;
    
    .panel-item {
      margin-bottom: 10px;
      flex: 1; // 面板项弹性增长
      min-height: 200px; // 设置最小高度
      max-height: 350px; // 设置最大高度
      
      &:last-child {
        margin-bottom: 5px;
      }
    }
  }
  
  // 底部面板，跨越整个宽度
  .bottom-panel {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    flex-wrap: wrap; // 允许在小屏幕上换行
    
    .panel-item {
      flex: 1;
      min-width: calc(33% - 10px); // 确保至少三列
      margin-right: 10px;
      margin-bottom: 10px; // 增加底部边距
      height: 250px; // 固定高度
      background: rgba(11, 35, 64, 0.7);
      border: 1px solid rgba(0, 164, 255, 0.4);
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
      backdrop-filter: blur(5px);
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// 数据看板样式
.data-dashboard {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px 10px 5px 10px;
  flex-wrap: nowrap; // 修改为不换行
  margin-top: 10px;
  z-index: 5;
  
  .dashboard-item {
    width: calc(20% - 8px); // 稍微减小间距，确保5个项目都能在一行
    height: 90px;
    background: rgba(11, 35, 64, 0.7);
    border: 1px solid rgba(0, 164, 255, 0.4);
    border-radius: 5px;
    padding: 12px 15px;
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
    margin-right: 8px; // 统一设置右边距
    
    &:last-child {
      margin-right: 0; // 最后一个元素不需要右边距
    }
    
    &:hover {
      transform: translateY(-3px);
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, #00f0ff, #0072ff);
    }
    
    &.danger::before {
      background: linear-gradient(to bottom, #ff6b6b, #ee5253);
    }
    
    &.warning::before {
      background: linear-gradient(to bottom, #feca57, #ff9f43);
    }
    
    &.success::before {
      background: linear-gradient(to bottom, #1dd1a1, #10ac84);
    }
    
    &.primary::before {
      background: linear-gradient(to bottom, #54a0ff, #2e86de);
    }
    
    .dashboard-value {
      font-size: 26px; // 稍微减小字号以适应宽度
      font-weight: bold;
      margin-bottom: 5px;
      color: #fff;
    }
    
    .dashboard-label {
      font-size: 13px; // 稍微减小字号
      color: #a7c9fe;
    }
    
    .dashboard-trend {
      margin-top: 5px;
      font-size: 12px;
      
      &.up {
        color: #f56c6c;
      }
      
      &.down {
        color: #67c23a;
      }
    }
  }
}

// 底部样式
.screen-footer {
  height: 30px;
  background: rgba(11, 27, 61, 0.8);
  border-top: 1px solid rgba(0, 164, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; // 提高z-index确保在其他元素之上
  position: fixed; // 改为固定定位，确保始终在底部
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%; // 确保占满宽度
  
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    
    span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 30s linear infinite;
      color: #7fdbff;
      font-size: 14px; // 确保文字大小合适
    }
    
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }
}

// 图表容器通用样式
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 150px; // 添加最小高度
}

// 实时预警列表样式
.alert-list {
  height: 100%;
  overflow-y: auto;
  padding-right: 5px;
  
  &::-webkit-scrollbar {
    width: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 123, 255, 0.5);
    border-radius: 2px;
  }
  
  // 警报条目的进入和离开动画
  .alert-enter-active,
  .alert-leave-active {
    transition: all 0.8s ease;
  }
  
  .alert-enter-from {
    opacity: 0;
    transform: translateX(-30px);
  }
  
  .alert-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  
  .alert-move {
    transition: transform 0.8s ease;
  }
  
  .alert-item {
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(24, 53, 90, 0.3);
    border-radius: 4px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(24, 53, 90, 0.5);
    }
    
    &:first-child {
      border-left-color: #f56c6c;
      background: rgba(24, 53, 90, 0.5);
      animation: flash 1.5s ease-in-out;
    }
    
    .alert-time {
      font-size: 12px;
      color: #7fdbff;
      margin-bottom: 5px;
    }
    
    .alert-content {
      display: flex;
      align-items: flex-start;
      font-size: 14px;
      color: #a7c9fe;
      
      .el-icon {
        margin-right: 5px;
        margin-top: 2px;
        font-size: 16px;
      }
      
      &.high-risk {
        color: #f56c6c;
      }
      
      &.medium-risk {
        color: #e6a23c;
      }
    }
  }
}

@keyframes flash {
  0% {
    background: rgba(245, 108, 108, 0.2);
  }
  50% {
    background: rgba(245, 108, 108, 0.4);
  }
  100% {
    background: rgba(24, 53, 90, 0.5);
  }
}

// 响应式调整
@media screen and (max-width: 1600px) {
  .screen-content {
    .left-panel, .center-panel, .right-panel {
      width: calc(33.33% - 7px);
    }
    
    .bottom-panel {
      flex-wrap: wrap;
      
      .panel-item {
        width: calc(50% - 5px);
        margin-bottom: 10px;
        
        &:nth-child(even) {
          margin-right: 0;
        }
      }
    }
  }
  
  // 调整数据看板在中等屏幕上的显示
  .data-dashboard {
    .dashboard-item {
      .dashboard-value {
        font-size: 24px;
      }
      
      .dashboard-label {
        font-size: 12px;
      }
      
      .dashboard-trend {
        font-size: 11px;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  // 在更小屏幕上进一步缩小数据看板内容
  .data-dashboard {
    .dashboard-item {
      padding: 10px;
      
      .dashboard-value {
        font-size: 22px;
      }
      
      .dashboard-label {
        font-size: 11px;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .data-dashboard {
    flex-wrap: wrap;
    
    .dashboard-item {
      width: calc(50% - 5px);
      margin-bottom: 10px;
      
      &:nth-child(even) {
        margin-right: 0;
      }
      
      &:nth-child(n+3) {
        margin-bottom: 0;
      }
    }
  }
}

.panel-item.realtime-alerts {
  .panel-content {
    padding: 0;
    position: relative;
    overflow: hidden;
    height: 100%; // 确保内容区域占满整个面板
  }

  .alert-list {
    height: auto;
    animation: scrollUp 30s linear infinite; // 放慢滚动速度
    padding: 15px;
    overflow: visible; // 允许内容溢出，使滚动更自然
    position: relative;
    
    &:hover {
      animation-play-state: paused;
    }

    // 复制警报项到列表底部
    &::after {
      content: "";
      display: block;
      height: 50px;
    }
  }
  
  // 创建渐变遮罩，使滚动看起来更自然
  &::before, &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 20px;
  }

  &::before {
    top: 36px; // 从标题栏下方开始
    background: linear-gradient(to bottom, rgba(11, 35, 64, 0.9) 0%, rgba(11, 35, 64, 0) 100%);
  }

  &::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(11, 35, 64, 0.9) 0%, rgba(11, 35, 64, 0) 100%);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100%)); // 完整滚动
  }
}
</style> 

